import type * as UiKit from '@rocket.chat/ui-kit';

export const sectionWithPlainText: readonly UiKit.LayoutBlock[] = [
	{
		type: 'section',
		text: {
			type: 'plain_text',
			text: 'This is a plain text section block.',
			emoji: true,
		},
	},
] as const;

export const sectionWithMrkdwn: readonly UiKit.LayoutBlock[] = [
	{
		type: 'section',
		text: {
			type: 'mrkdwn',
			text: 'This is a mrkdwn section block :ghost: *this is bold*, and ~this is crossed out~, and <https://google.com|this is a link>',
		},
	},
] as const;

export const sectionWithTextFields: readonly UiKit.LayoutBlock[] = [
	{
		type: 'section',
		fields: [
			{
				type: 'plain_text',
				text: '*this is plain_text text*',
				emoji: true,
			},
			{
				type: 'plain_text',
				text: '*this is plain_text text*',
				emoji: true,
			},
			{
				type: 'plain_text',
				text: '*this is plain_text text*',
				emoji: true,
			},
			{
				type: 'plain_text',
				text: '*this is plain_text text*',
				emoji: true,
			},
			{
				type: 'plain_text',
				text: '*this is plain_text text*',
				emoji: true,
			},
		],
	},
] as const;

export const sectionWithButtonAccessory: readonly UiKit.LayoutBlock[] = [
	{
		type: 'section',
		text: {
			type: 'mrkdwn',
			text: 'This is a section block with a button.',
		},
		accessory: {
			appId: 'dummy-app-id',
			blockId: 'dummy-block-id',
			actionId: 'dummy-action-id',
			type: 'button',
			text: {
				type: 'plain_text',
				text: 'Click Me',
				emoji: true,
			},
			value: 'click_me_123',
		},
	},
] as const;

export const sectionWithImageAccessory: readonly UiKit.LayoutBlock[] = [
	{
		type: 'section',
		text: {
			type: 'mrkdwn',
			text: 'This is a section block with an accessory image.',
		},
		accessory: {
			type: 'image',
			imageUrl:
				'',
			altText: 'cute cat',
		},
	},
] as const;

export const sectionWithOverflowMenuAccessory: readonly UiKit.LayoutBlock[] = [
	{
		type: 'section',
		text: {
			type: 'mrkdwn',
			text: 'This is a section block with an overflow menu.',
		},
		accessory: {
			appId: 'dummy-app-id',
			blockId: 'dummy-block-id',
			actionId: 'dummy-action-id',
			type: 'overflow',
			options: [
				{
					text: {
						type: 'plain_text',
						text: '*this is plain_text text*',
						emoji: true,
					},
					value: 'value-0',
				},
				{
					text: {
						type: 'plain_text',
						text: '*this is plain_text text*',
						emoji: true,
					},
					value: 'value-1',
				},
				{
					text: {
						type: 'plain_text',
						text: '*this is plain_text text*',
						emoji: true,
					},
					value: 'value-2',
				},
				{
					text: {
						type: 'plain_text',
						text: '*this is plain_text text*',
						emoji: true,
					},
					value: 'value-3',
				},
				{
					text: {
						type: 'plain_text',
						text: '*this is plain_text text*',
						emoji: true,
					},
					value: 'value-4',
				},
			],
		},
	},
] as const;

export const sectionWithDatePickerAccessory: readonly UiKit.LayoutBlock[] = [
	{
		type: 'section',
		text: {
			type: 'mrkdwn',
			text: 'Pick a date for the deadline.',
		},
		accessory: {
			appId: 'dummy-app-id',
			blockId: 'dummy-block-id',
			actionId: 'dummy-action-id',
			type: 'datepicker',
			initialDate: '1990-04-28',
			placeholder: {
				type: 'plain_text',
				text: 'Select a date',
				emoji: true,
			},
		},
	},
] as const;
